<template>
    <div>
      <div class="container ">
        <div>
          <div class="row">
            <div class="col-md-12">
              <div class="Brand_introduction">
                <h6 class="brand_title">品牌介绍</h6>
                <p>
                  2011年10月，“领军秀”系列路演正式启动。
                  “领军秀”为科技型中小企业提供项目展示、需求发布、投融资对接、企业诊断、创业辅导及培训等服务。活动主要面向创业团队、投融资机构、高校科研院所、政府及协会、行业龙头企业等。这个微秀场，资本、市场、信息、技术、人才等诸多资源高度集聚，每一位参会者都将获得发掘价值合作伙伴的机会
                </p>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-8">
              <div class="brand_left hot_BJ">
                <div class="givenchy ">
                  <div class="givenchy_time identical">
                    <ul class="clearfix">
                      <li>时间筛选：</li>
                      <li
                        v-for="(item ,index) in timeD"
                        :class="{'timeactive':timecur === index}"
                        @click="TimeItme(item,index)"
                      >
                        {{ item }}
                      </li>
                    </ul>
                  </div>
                  <div class="givenchy_PX identical">
                    <ul class="clearfix ">
                      <li>排序：</li>
                      <li
                        v-for="(item,index) in pxD"
                        :class="{'timeactive':hotcur === index}"
                        @click="HotItme(item,index)"
                      >
                        {{ item }}
                      </li>
                    </ul>
                  </div>
                </div>
                <!--  -->
                <div class="givenchy_message" v-for="item in signD">
                  <div class="massage_img">
                    <img :src="item.img" alt="" />
                  </div>
                  <div class="massage_text">
                    <h6>{{ item.title }}</h6>
                    <p class="massage_read">
                      <span
                      ><i><img src="../../../static/images/read.png" alt=""/></i
                      >{{ item.read }}阅读</span
                      ><span
                    ><i><img src="../../../static/images/Order.png" alt=""/></i
                    >发布时间：{{ item.time }}</span
                    >
                    </p>
                    <p>活动时间：{{ item.hdtime }}</p>
                    <p>活动地址：{{ item.hdaddress }}</p>
                  </div>
                  <div class="massage_btn">
                    <button
                      type="button"
                      class="btn btn-default btn-lg btn-block"
                    >
                      {{ item.tense }}</button
                    >
                  </div>

                </div>
                <!-- 分页 -->
                <pagination :msg="page" @refreshList="onRefresList"></pagination>
              </div>
            </div>
            <div class="col-md-4">
              <div class="brand_right hot_BJ">
                <div class="consultation"><span>活动资讯</span><span><a href="#">更多》</a></span></div>
                <div class="info-img-list">
                  <div class="info-img-item">
                    <div class="span-ra"><img src="../../../static/images/hd_p4.png">
                      <span>园区高企专场培训季-系列十四</span>
                    </div>
                    <div><span>108次阅读</span><span>2019-04-04  17:32:08</span></div>
                  </div>
                  <div class="info-img-item">
                    <div class="span-ra"><img src="../../../static/images/hd_p4.png">
                      <span>园区高企专场培训季-系列十四</span>
                    </div>
                    <div><span>108次阅读</span><span>2019-04-04  17:32:08</span></div>
                  </div>
                  <div class="info-img-item">
                    <div class="span-ra"><img src="../../../static/images/hd_p4.png">
                      <span>园区高企专场培训季-系列十四</span>
                    </div>
                    <div><span>108次阅读</span><span>2019-04-04  17:32:08</span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <br /><br /><br />
      </div>
    </div>
</template>

<script>
  import pagination from '../../views/localPage/pagination'
    export default {
        name: "Activity",
      components:{pagination},
      data(){
        return{
          page:{
            pagesize:4,
            total:900,
          },
          timecur: 0,
          hotcur: 0,
          timeD: ["不限", "最近一周", "最近一月"],
          pxD: ["时间", "热度"],
          signD: [
            {
              img: "../../../static/images/hd_p1.png",
              title: "债权路演对接会（第二期）",
              read: 473,
              time: "2019-04-09",
              hdtime: " 2019-04-24 14:00  ~  17:00",
              hdaddress: "江苏省-苏州市-工业园区",
              tense: "报名中",

            },
            {
              img: "../../../static/images/hd_p3.png",
              title: "债权路演对接会（第二期）",
              read: 473,
              time: "2019-04-09",
              hdtime: " 2019-04-24 14:00  ~  17:00",
              hdaddress: "江苏省-苏州市-工业园区",
              tense:"截止报名",

            },
            {
              img: "../../../static/images/hd_p4.png",
              title: "债权路演对接会（第二期）",
              read: 473,
              time: "2019-04-09",
              hdtime: " 2019-04-24 14:00  ~  17:00",
              hdaddress: "江苏省-苏州市-工业园区",
              tense: "报名中",

            },
            {
              img: "../../../static/images/hd_p5.png",
              title: "债权路演对接会（第二期）",
              read: 473,
              time: "2019-04-09",
              hdtime: " 2019-04-24 14:00  ~  17:00",
              hdaddress: "江苏省-苏州市-工业园区",
              tense: "报名中",
              Endtense:""
            }
          ],
        }
      },
      methods: {

        // 时间筛选
        TimeItme(item, index) {
          this.timecur = index;
        },
        // 排序
        HotItme(item, index) {
          this.hotcur = index;
        },
        onRefresList(val){
          console.log(val)
        }
      }
    }
</script>
<style scoped>
  .Brand_introduction{
    margin: 50px 0 30px 0;
    padding: 35px 25px;
    height: 247px;
    background-color: #ffffff;
    border: solid 1px #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 0 10px #e0e0e0;
  }
  .Brand_introduction .brand_title{
    font-size: 20px;
    font-weight: 600;
    height: 50px;
    line-height: 50px;
    margin-bottom: 15px;
    color: #333333;
  }
  .brand_left,.brand_right{
    padding: 20px 10px ;
    border: solid 1px #e0e0e0;
    border-radius: 5px;
  }
  .givenchy{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    padding: 20px;
  }
  .identical li{
    float: left;
    padding: 0 10px;
    height: 30px;
  }
  .identical .timeactive{
    color: #1575f9;
  }
  .givenchy_message{
    height: 250px;
    border-bottom: 1px solid #e0e0e0;
  }
  .givenchy_message,.givenchy_message .massage_read{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .givenchy_message .massage_img{
    width: 247px;
  }
  .givenchy_message .massage_img img{
    width: 100%;
  }
  .givenchy_message .massage_text{width: calc(100% - 350px);padding: 0 20px;}
  .givenchy_message .massage_text p{
    color: #666666;
  }
  .givenchy_message .massage_text>h6{
    font-size: 20px;
    font-weight:600;
    color: #333333;
  }
  .givenchy_message .massage_read{
    font-size: 12px ;
    color: #999999;
  }
  .givenchy_message .massage_read i{
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 5px;
  }
  .givenchy_message .massage_read i img{
    width: 100%;
    height: 100%;
  }
  .givenchy_message .massage_btn{
    width: 120px;
  }
  .consultation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
  }

  .consultation{
    height: auto;
  }
  .brand_right{
    padding: 17px 10px;
  }
  .info-img-item{
    width: 300px;
    margin: 20px auto;
  }
  .info-img-item img{
    width: 100%;
  }
  .span-ra{
    position: relative;
  }
  .span-ra span{
    position: absolute;
    background:rgba(0,0,0,1);
    opacity:0.6;
    text-align: center;
    bottom: 0;
    color: #FFFFFFFF;
    display: inline-block;
    width: 100%;
  }
  .givenchy_message .massage_btn{

  }
</style>

